<template>
  <div class="login_root">
    <!-- <div class="login_header">
      <h1>后台管理系统</h1>
    </div> -->
    <div class="login-body">
      <h2>登录</h2>
      <div class="login-box">
        <a-form
          id="components-form-demo-normal-login"
          :form="form"
          class="login-form"
          @submit="handleSubmit"
        >
          <a-form-item>
            <a-input
              v-decorator="[
          'username',
          { rules: [ { required: true, whitespace: true, message: '用户名必须输入' },
                    { min: 4, message: '用户名至少4位' },
                    { max: 12, message: '用户名最多12位' },
                    { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须是英文、数字或下划线组成' }] },
        ]"
              placeholder="用户名"
              initialValue="admin"
            >
              <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              v-decorator="[
          'password',
          { rules: [{ required: true, whitespace: true, message: '密码必须输入' },
                    { min: 4, message: '密码至少4位' },
                    { max: 12, message: '密码最多12位' },
                    { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须是英文、数字或下划线组成' }] },
        ]"
              type="password"
              placeholder="密码"
            >
              <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" block html-type="submit" class="login-form-button">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import {reqLogin } from '../../api/index'
import { message } from 'ant-design-vue';
import storageUtil from '../../utils/storageUtil'
export default {
  data() {
    return {};
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields(async (err, values) => {
        if (!err) {
          const result = await reqLogin(values.username,values.password)
          if(result.status === 0 ){
            storageUtil.setUser(result.data)
            this.$router.replace('/')
          }else{
              message.error("账号或者密码错误!")
          }
        }
      })
    }
  }
};
</script>>

<style lang="stylus" rel="stylesheet/stylus">
.login_root {
  padding-top 20px
  height: 100%;
  background-image: url('./images/bg.jpg');
  background-size: 100% 100%;

  .login_header {
    background-color: rgba(21, 20, 13, 0.5);
  }

  h1 {
    color: white;
    font-size: 0.4rem;
    text-align: center;
  }
}

.login-body {
  margin: 0 auto;
  padding: 20px;
  width: 400px;
  height: 300px;
  background-color: white;
}

.login-body h2 {
  text-align: center;
  color: black;
}

a-input {
  margin: 10px 0;
}

.username, .password {
  margin: 0 0 40px 0;
}
</style>
